<template>
	<div class="container">
		<div class="left" >
			<div class="logo">
				<div>家族族谱管理系统</div>
			</div>
		<Time class="forts-time" />
		<div class="menu">
		<el-menu
        active-text-color="#ffd04b"
        background-color="#497568"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        router
      >
	
	<!-- 信息查询 -->
	<div>
	<!-- <div class="buttom-student-select">
	<el-sub-item index="1" @click='goToStudentSelect()' plain>个人信息查询</el-sub-item>
	</div> -->
	<el-menu-item index="/info/update" @click='goToStudentUpdate()' plain ><el-icon><Edit /></el-icon>信息修改</el-menu-item>
	<!-- 信息录入 -->
	<!-- <div class="buttom-student-insert">
	<el-sub-item index="2" @click='goToStudentInsert()' plain>信息录入</el-sub-item>
	</div> -->
	<el-menu-item index="/info/update" @click='goToStudentInsert()' plain ><el-icon><Edit /></el-icon>信息录入</el-menu-item>
	<!-- 信息修改 -->
	<!-- <div class="buttom-student-update">
		<el-sub-item index="3" @click='goToStudentUpdate()' plain>信息修改</el-sub-item>
	</div>  -->
	<el-menu-item index="/info/update" @click='goToStudentUpdate()' plain ><el-icon><Edit /></el-icon>信息修改</el-menu-item>
	<!-- 信息删除 -->
	<!-- <div class="buttom-student-delete">
		<el-sub-item index="4" @click='goToStudentDelete()' plain>信息删除</el-sub-item>
	</div> -->
	<el-menu-item index="/info/update" @click='goToStudentDelete()' plain ><el-icon><Edit /></el-icon>信息删除</el-menu-item>
	</div>
	</el-menu>
	</div>
		 <div class="right">
            <div class="top">
              <div class="icon">
              </div>
            <div class="menu">
                <el-menu
                    default-active="1"
                    class="el-menu-demo"
                     mode="horizontal"
                     background-color="#497568"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    >
                <el-menu-item index="1"><el-icon><HomeFilled /></el-icon>首页</el-menu-item>
        
                  <el-sub-menu index="2">
                <template #title><el-icon><Menu /></el-icon>管理</template>
                 <el-menu-item index="3-1"><el-icon><UserFilled /></el-icon>个人中心</el-menu-item>
                <el-menu-item index="3-2"><el-icon><Edit /></el-icon>修改密码</el-menu-item>
                <el-menu-item index="3-3">退出系统</el-menu-item>
          </el-sub-menu>
		  </el-menu>
	  </div>
	   </div>
	  </div>
	  <div class="bottom"></div>
	</div>
	</div>
</template>

<script>
	import Time from "./Time.vue";
	export default {
		name: "MainMenu",
		components: {
			Time,

		},
		methods: {
			goToStudentSelect() {
				//直接跳转
				this.$router.push('/info/select');
			},
			goToStudentInsert() {
				//直接跳转
				this.$router.push('/info/insert');
			},
			goToStudentUpdate() {
				//直接跳转
				this.$router.push('/info/update');
			},
			goToStudentDelete() {
				//直接跳转
				this.$router.push('/info/delete');
			},
		},
	}
</script>

<style lang="scss" scoped>
	/* .forts {
		font-size: 40px;
	} */
	.forts-time {
		font-size: 40px;
		position: absolute;
		left: 70%;
		top: 0%;
	}
.container {
	width:100vw;
    height:100vh;
    display: flex;

	.left{
      width:200px;
      background-color: #497568;
	  div{
            color: rgb(255, 255, 255);
            font-size: 50px;
            // border: 1px solid #eee;
            padding: 10px 10px;

          }
	  .logo{
          height: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
		   div{
            color: rgb(255, 255, 255);
            font-size: 19px;
            // border: 1px solid #eee;
            padding: 4px 10px;
            border-radius: 4px;
          }

        }
	}
	.right{
       flex: 1;
        display: flex;
        flex-direction: column;
        .top{
            height: 60px;
            background-color: #497568;
            display: flex;
            align-items: center;
            justify-content: space-between;

 			.menu{
              width: 500px;
            }
			.bottom{
            //flex: 1;
            padding: 300px;
            align-content: center;
        }
		}
	}
}
</style>